blob: 6544dc002d27e1d26555b894e278ae5300c24c27 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<script>
import { browser } from '$app/environment';
import { onMount } from 'svelte';
import { AppHeader, Icon, PageNotFound } from '$comp';
import { user } from '$lib/store';
import { copy } from '$lib/utils';
import { t } from '$lib/translations';
export let data;
let lightningAddress = `${data?.username}@coinos.io`;
onMount(async () => {
if (browser) {
let { default: QRCodeStyling } = await import('qr-code-styling');
const qrCode = new QRCodeStyling({
width: window.screen.width < 640 ? 250 : 300,
type: 'canvas',
data: lightningAddress,
image: '/images/invoice.svg',
backgroundOptions: {
color: 'rgba(0, 0, 0, 0)'
},
dotsOptions: {
type: 'rounded'
},
imageOptions: {
hideBackgroundDots: false
}
});
qrCode.append(document.getElementById('qr'));
}
});
let followed = false;
</script>
{#if data?.username}
<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
<div class="flex xl:block justify-center items-center my-20 px-3">
<div class="space-y-10 xl:space-y-0">
<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
<h1 class="text-3xl font-bold">{data.username}</h1>
<p class="text-secondary">{$user.address ? $user.address : ''}</p>
<!-- TODO
we need to hook this up
<button
class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
on:click={() => (followed = !followed)}
><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
{$t('user.' + (followed ? 'remove' : 'follow'))}
</button>
-->
</div>
<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
<div
on:click={() => copy(lightningAddress)}
id="qr"
class=" cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
/>
<p class="text-secondary text-center font-semibold">{$t('user.scanToPayBTC')}</p>
<div
class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
>
<span>{lightningAddress}</span>
<button on:click={() => copy(lightningAddress)}>
<Icon icon="copy" style="ml-2" />
</button>
</div>
</div>
</div>
</div>
{:else}
<PageNotFound />
{/if}
|
